<template>
	<view class="main">
		<view class="search-box">
			<u-search placeholder="请输入关键字" v-model="queryParams.typeName" clearabled :showAction="false"></u-search>
		</view>
		<view class="tags-box">
			<view class="my-turn" @click="changeTags('turn')">
				我流经
				<view class="active-line" v-if="tagsType === 'turn'"></view>
			</view>
			<view class="my-launch" @click="changeTags('launch')">
				我发起
				<view class="active-line" v-if="tagsType === 'launch'"></view>
			</view>
		</view>
		<scroll-view v-if="listData.length" scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
			<view class="list-box" v-for="(item, index) in listData" :key="index"
				@click="goMyUpcoming(item)">
				<view class="left">
					<u--image :src="applicationIcons[item.type]" width="60rpx" height="60rpx"></u--image>
					<!-- <img class="pic" :src="applicationIcons[item.type]" alt=""> -->
				</view>
				<view class="middle">
					<view class="event-type">{{item.typeName}}</view>
					<view class="detail">申请人：{{item.createBy}}</view>
				</view>
				<view class="right">
					<view>{{item.startTime}}</view>
					<u-icon class="pic-right" name="arrow-right"></u-icon>
					<!-- <img class="pic-right" :src="require('https://pc.chinaonebuild.com/images/todoList/right.png')" alt=""> -->
				</view>
			</view>
		</scroll-view>
		<!-- 没有图片的 -->
		<view class="no-data" v-if="!listData.length">
			<img class="no-data-pic" src="https://pc.chinaonebuild.com/images/todoList/noData.png" alt="">
			<view>暂无待办</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryParams: {
					typeName: "",
					pageSize: 10,
					pageNum: 1
				},
				tagsType: 'turn', //turn, launch
				//总数据
				total: 0,
				// 防抖
				deubge: null,
				listData: [],
				// 所有应用图标
				applicationIcons: {
					"alert": "https://pc.chinaonebuild.com/images/workspace/alarm.png",
					"patrol": "https://pc.chinaonebuild.com/images/workspace/patrol.png",
					"当前车辆": "https://pc.chinaonebuild.com/images/workspace/currentVehicle.png",
					"人员管理": "https://pc.chinaonebuild.com/images/workspace/person.png",
					"visitor": "https://pc.chinaonebuild.com/images/workspace/visitor.png",
					// "车辆统计": "https://pc.chinaonebuild.com/images/workspace/vehicleStatistics.png",
					"车流统计": "https://pc.chinaonebuild.com/images/workspace/vehicleStatistics.png",
					"预定记录": "https://pc.chinaonebuild.com/images/workspace/appRecord.png",
					"在线监控": "https://pc.chinaonebuild.com/images/workspace/monitor.png",
					"我的审批": "https://pc.chinaonebuild.com/images/workspace/approval.png",
					"工位巡查": "https://pc.chinaonebuild.com/images/workspace/inspection.png",
					"设备监测": "https://pc.chinaonebuild.com/images/workspace/monitoring.png",
					"车辆登记": "https://pc.chinaonebuild.com/images/workspace/vehiclereg.png",
					"考勤查询": "https://pc.chinaonebuild.com/images/workspace/attendance.png",
					"holiday": "https://pc.chinaonebuild.com/images/workspace/fakeAttendance.png",
					"meeting": "https://pc.chinaonebuild.com/images/workspace/scheMeeting.png",
				},
			}
		},
		watch: {
			'queryParams.typeName'(v) {
				clearTimeout(this.deubge)
				this.deubge = setTimeout(() => {
					this.listData = []
					this.queryParams.pageNum = 1
					this.upcoming(this.tagsType)
				}, 700)
			}
		},
		methods: {
			// 点击跳转
			goMyUpcoming(item) {
				let label = ""
				switch (item.type) {
					case 'holiday':
						// 假勤申请
						label =
							`pages/workbench/leaveManagement/component/attendanceDetails/attendanceDetails?id=${item.id}`
						break;
					case 'visitor':
						// 访客登记
						label = `pages/workbench/visitorInfo/components/visitorRegistration?id=${item.id}`
						break;
					case 'alert':
						// 告警事件
						label = `pages/workbench/alarmManagement/components/detail?id=${item.id}`
						break;
					case 'patrol':
						// 巡更任务
						label = `pages/workbench/onlinePatrol/patrolDetail?id=${item.id}`
						break;
					case 'meeting':
						// 会议预定
						// label = `pages/synthesize/bookingRecord/detail?id=${encodeURIComponent(JSON.stringify(item.id))}`
						label = `pages/synthesize/bookMeeting/ApprovalMeeting?id=${item.id}&from=finished&payload=${encodeURIComponent(JSON.stringify(item))}`
						break;
				}
				uni.navigateTo({
					url: label
				})
			},
			// 下拉更新
			scrolltolower() {
				this.queryParams.pageNum += 1
				if (this.total <= this.listData.length) {
					uni.showToast({
						icon: 'loading',
						duration: 2000,
						title: '已经没有新的数据了！',
					})
					return
				}
				this.upcoming(this.tagsType)
			},
			// 请求数据
			upcoming(v) {
				this.$api.upcoming({
					...this.queryParams,
					showType: v !== 'launch' ? 1 : 2,
					approvalStatus: 0
				}).then(res => {
					this.listData = this.listData.concat(res.rows)
					this.total = res.total
				})
			},
			changeTags(type) {
				this.tagsType = type
				this.listData = []
				this.queryParams.pageNum = 1
				this.upcoming(type)
			},
		},
		onLoad() {
			this.upcoming()
		},
	}
</script>

<style scoped lang="scss">
	.scroll-Y {
		height: 1050rpx;
	}

	.no-data {
		margin-top: 146rpx;
		text-align: center;
	}

	.no-data-pic {
		width: 360rpx;
		height: 360rpx;
	}

	.tags-box {
		overflow: hidden;

		.my-turn,
		.my-launch {
			float: left;
			width: 50%;
			text-align: center;
		}

		.active-line {
			width: 64rpx;
			height: 8rpx;
			background: #3C9CFF;
			border-radius: 8rpx;
			margin: 10rpx auto 0;
		}
	}

	.main {
		padding: 28rpx 28rpx 0;
	}

	.search-box {
		margin-bottom: 28rpx;
	}

	.list-box {
		display: flex;
		border-bottom: 1rpx solid #C0C4CC;
		height: 130rpx;
		padding: 28rpx 0;
	}

	.left {
		width: 60rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.pic {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.middle {
		margin-left: 16rpx;
		font-family: 'PingFang SC';
		flex: 1;

		.event-type {
			font-weight: 400;
			font-size: 28rpx;
			margin-bottom: 8rpx;
		}

		.detail {
			font-size: 24rpx;
		}
	}

	.right {
		display: flex;
		align-items: center;
		font-size: 24rpx;

		.pic-right {
			width: 32rpx;
			height: 32rpx;
		}
	}
</style>
